<template>
  <div id="config">
    <el-row class="title"><el-button size="small" icon="iconfont iconback" circle @click="()=>{$router.push({name: 'module'})}"></el-button></el-row>
    <el-row class="tac">
        <el-col :span="4">
            <el-menu
            default-active="intake"
            class="el-menu-vertical-demo"
            @select="menuSelect">
                <el-menu-item index="intake" @click="()=>{$router.push({name: 'intake'})}">
                    <i class="el-icon-date"></i>
                    <span slot="title">年级</span>
                </el-menu-item>
                <el-menu-item index="colleges" @click="()=>{$router.push({name: 'colleges'})}">
                    <i class="el-icon-menu"></i>
                    <span slot="title">学院</span>
                </el-menu-item>
                <el-menu-item index="majors" @click="()=>{$router.push({name: 'majors'})}">
                    <i class="el-icon-document"></i>
                    <span slot="title">专业</span>
                </el-menu-item>
                <el-menu-item index="classes" @click="()=>{$router.push({name: 'classes'})}">
                    <i class="el-icon-news"></i>
                    <span slot="title">班级</span>
                </el-menu-item>
            </el-menu>
        </el-col>
        <el-col :span="20">
            <router-view  class="child-view"></router-view>
        </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'config',
  data () {
    return {
      tab: 0,
      tabNames: ''
    }
  },
  methods: {
    menuSelect (index) {
      this.$router.push({ name: index })
    }
  },
  watch: {

  }
}
</script>

<style lang="scss" scoped type="text/css">
#config{
  .title{
    border-bottom :rgb(235, 238, 245) 1px solid;
    display:flex;
    flex-direction: row-reverse;
    align-items: center;
    height:45px;
    button{
      margin-right:20px;
    }
  }
}

</style>
